<template>
  <el-tag :type="statusType" size="small">
    {{ statusText }}
  </el-tag>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'StatusRenderer',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const statusType = computed(() => {
      const typeMap = {
        completed: 'success',
        'in-progress': 'warning',
        pending: 'info'
      }
      return typeMap[props.value] || 'info'
    })
    
    const statusText = computed(() => {
      const textMap = {
        completed: '已完成',
        'in-progress': '进行中',
        pending: '待开始'
      }
      return textMap[props.value] || '未设置'
    })
    
    return {
      statusType,
      statusText
    }
  }
}
</script> 